<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem</title>
    <style>        
        .wrap{
            font-size: .16rem;
        }
    </style>
</head>
<body>
    <!-- 
        rem: 相对于根元素字体大小，也就是html元素，
             rem 实现响应布局的本质是 屏幕宽度等比缩放。

        假如 html 的 font-size 为 100px，那么 1rem = 100px

        元素宽度为 30px，转成rem公式是 30px / 100px = 0.3rem

        假如 设计稿宽度为 640px，html 的 font-size 为 100px（设为100px为了方便计算）
        那么 当实际屏幕宽度不为 640px时，计算 html 的 font-size 公式为：
               「 实际屏幕宽度 / 设计稿宽度 * 100px 」
        
        解释：当实际屏幕宽度 不等于 设计稿宽度时，算出 实际屏幕 相比 设计稿宽度 缩放了多少，
             假如 480px（实际宽）/ 640（设计稿宽）= 0.75，那么实际宽是设计稿宽的 0.75 倍，
             html 的 font-size 应该缩放到 0.75 倍，那么 rem 也随之缩放到 0.75 倍。
        
    -->
    <div class="wrap">
        hello world!
    </div>
</body>
<script>

    // 假设 设计稿宽度 = 375
    function setRootFontSize(){
        let width = document.documentElement.clientWidth
        document.documentElement.style.fontSize = width / 375 * 100 + 'px' 
        console.log('...', width, width / 375 * 100 )       
    }
    
    // 屏幕尺寸改变时，重新设置 html 的 font-size
    let timeId
    window.addEventListener('resize', function(){
        // 防抖处理
        clearTimeout(timeId)
        timeId = setTimeout(() => {
            setRootFontSize()
        }, 300);
    })

    setRootFontSize()

</script>
</html>